import React from 'react';
import {Icon, Tabs, Card, Upload, Row, Col, Modal} from 'antd';

const TabPane = Tabs.TabPane;
import MobileHeader from './mobile_header';

export default class MobileUserCenter extends React.Component {
    constructor() {
        super();
        this.state = {
            usercollection: '',
            usercomments: '',
            previewImage: '',
            previewVisible: false
        };
    };

    componentDidMount() {
        var myFetchOptions = {
            method: 'GET'
        };
        // 我的收藏 数据
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid=" + localStorage.userid, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({usercollection: json});
            });
        // 我的评论 数据
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=" + localStorage.userid, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({usercomments: json});
            });
    };

    render() {
        // 上传图片 设置
        const props = {
            action: 'http://newsapi.gugujiankong.com/handler.ashx',
            // 跨域
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            listType: 'picture-card',
            // 默认文件列表
            defaultFileList: [
                {
                    uid: -1,
                    name: 'xxx.png',
                    state: 'done',
                    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
                    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png'
                }
            ],
            onPreview: (file) => {
                this.setState({previewImage: file.url, previewVisible: true});
            }
        };
        // 收藏列表
        const {usercollection, usercomments} = this.state;
        const usercollectionList = usercollection.length ?
            usercollection.map((uc, index) => (
                <Card key={index} title={uc.Title} extra={<a href={`/#/details/${uc.uniquekey}`}>查看</a>}>
                    <p>时间：.....</p>
                </Card>
            ))
            :
            '您还没有收藏任何的新闻，快去收藏一些新闻吧。';
        // 我的评论 列表
        const usercommentsList = usercomments.length ?
            usercomments.map((comment, index) => (
                <Card key={index}
                      title={`于 ${comment.datetime} 评论了文章 ${comment.uniquekey}`}
                      extra={<a href={`/#/details/${comment.uniquekey}`}>查看</a>}>
                    <p>评论内容：{comment.Comments}</p>
                </Card>
            ))
            :
            '您还没有发表过任何评论。';
        return (
            <div>
                <MobileHeader/>
                <Row>
                    <Col span={24}>
                        <Tabs>
                            <TabPane tab="我的收藏列表" key="1">
                                <div className="comment">
                                    <Row>
                                        <Col span={24}>
                                            {usercollectionList}
                                        </Col>
                                    </Row>
                                </div>
                            </TabPane>
                            <TabPane tab="我的评论列表" key="2">
                                <div className="comment">
                                    <Row>
                                        <Col span={24}>
                                            {usercommentsList}
                                        </Col>
                                    </Row>
                                </div>
                            </TabPane>
                            <TabPane tab="头像设置" key="3">
                                <div className="clearfix">
                                    <Upload {...props}>
                                        <Icon type="plus"/>
                                        <div className="ant-upload-text">上传照片</div>
                                    </Upload>
                                    <Modal visible={this.state.previewVisible} footer={null}
                                           onCancel={this.handleCancel}>
                                        <img alt="预览" src={this.state.previewImage}/>
                                    </Modal>
                                </div>
                            </TabPane>
                        </Tabs>
                    </Col>
                </Row>
            </div>
        );
    };
};
